<template>
  <div class="recommend">
    <p class="relatedSuggestion-title">
      <span class="iconfont icon-biaoqian"></span> 相关推荐
    </p>
    <div class="relatedSuggestion-ul">
      <div class="relatedSuggestion-li" v-for="v in tableData" :key="v.id">
        <p class="txt-row clearfix">
          <span
            @click="toKnowledgeDetail(v)"
            class="row-cont col knowledge-name"
          >
            <span v-show="v.sysKnowledgeChapterList[0].courseName"
              >{{ v.sysKnowledgeChapterList[0].courseName }} /
            </span>
            {{ v.name }}
          </span>
        </p>
        <p class="txt-row clearfix">
          <span class="row-cont col knowledge-content">{{
            educationList(v)
          }}</span>
        </p>
        <div class="look-down">
          <LookDown txtShow :count="v.evaluateVO" />
        </div>
      </div>
      <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
    </div>
  </div>
</template>
<script>
import { LIBRARY } from '@/utils/config.js'
import {
  openApiSysCourseQuery,
  openApiSysKnowledgeRelatedRecommend,
} from '@/api/openApi'
export default {
  components: {
    LookDown: () => import('@/components/home/lookDown.vue'),
  },
  data() {
    return {
      type: this.$route.meta.type,
      curLibrary: {},
      listQuery: {
        page: 1,
        limit: 8,
        courseType: this.$route.meta.type,
        recommendId: this.$route.query.id,
        queryMode: 1, //查询模式；1-发布，2-预览
      },
      tableData: [],
    }
  },
  computed: {
    educationList: function () {
      return function (data) {
        if (
          data.ideologicalEducationList &&
          data.ideologicalEducationList.length > 0
        ) {
          let ideologicalEducationList = data.ideologicalEducationList
            .filter((v) => v && v.hasOwnProperty('name'))
            .map((v) => v.name)
            .join(' | ')
          return ' | ' + ideologicalEducationList + ' | '
        } else {
          return ''
        }
      }
    },
  },
  watch: {
    $route() {
      this.getRecommendCount()
    },
  },
  mounted() {
    this.curLibrary = LIBRARY.filter((v) => v.type == this.type)[0]
    // this.getList();
    this.getRecommendCount()
  },
  methods: {
    getList() {
      this.listQuery.recommendId = this.$route.query.id
      openApiSysKnowledgeRelatedRecommend(this.listQuery).then((res) => {
        this.tableData = res.data.data
      })
    },
    //推荐数量
    async getRecommendCount() {
      let res = await this.$store.dispatch(
        'getDictionaryVal',
        'RECOMMEND_COUNT',
      )
      this.listQuery.limit = res[0] || 5
      this.getList()
    },
    toKnowledgeDetail(row) {
      let { sysKnowledgeChapterList } = row
      let { courseId, type } = sysKnowledgeChapterList[0]
      this.getCourseInfo(courseId).then((v) => {
        this.$store.commit('SETCURCOURSE', v)
        this.$store.commit('SETKNOLEDGE', row)
        var name = 'knowdedge-detail'
        switch (type) {
          case '1':
            name = 'knowdedge-detail'
            break
          case '2':
            name = 'specialty-knowdedge'
            break
          case '3':
            name = 'arms-knowdedge-home'
            break
          case '4':
            name = 'topic-knowdedge-detail'
            break
          default:
            name = 'knowdedge-detail'
        }
        // this.$router.push({
        //   name: name,
        //   query: { id: row.id, queryMode: this.listQuery.queryMode },
        // });
        const routeUrl = this.$router.resolve({
          name: name,
          query: { id: row.id, queryMode: this.listQuery.queryMode },
        })
        window.open(routeUrl.href, '_blank')
      })
    },
    getCourseInfo(id) {
      return new Promise((resolve, reject) => {
        openApiSysCourseQuery({ id })
          .then((res) => {
            resolve(res.data.data[0])
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
  },
}
</script>
<style scoped lang="scss" >
.recommend {
  padding: 0 20px 40px;
  box-sizing: border-box;
  background: #f8f8f8;
  border: 1px solid #e6e6e6;
  .relatedSuggestion-title {
    font-size: 18px;
    color: #333;
    font-weight: 900;
    line-height: 40px;
    padding-top: 10px;
    border-bottom: 1px solid #e6e6e6;
    span {
      color: #18a9cd;
    }
  }
  .relatedSuggestion-ul {
    .relatedSuggestion-li {
      padding: 10px 0;
      border-bottom: 1px dashed #ddd;
      .txt-row {
        font-size: 16px;
        width: 100%;

        .row-name {
          font-weight: 900;
        }
        .knowledge-name {
          color: #333;
          display: inherit;
          text-indent: 15px;
          position: relative;
          cursor: pointer;
          line-height: 28px;
          padding: 5px 0;
          &::before {
            position: absolute;
            left: 0;
            top: 18px;
            content: '';
            width: 4px;
            height: 4px;
            background: #18a9cd;
          }
          &:hover {
            color: var(--colorH1);
          }
        }
        .knowledge-content {
          font-size: 14px;
          line-height: 22px;
          color: #999;
        }
      }
      .look-down {
        margin-top: 5px;
      }
    }
  }
}
</style>
